<template>
  <view class="nav-container">
    <view class="service-container">
      <view class="service-content">
        <view class="service-item" @click="goPlay">
          <image
            src="https://img.alicdn.com/imgextra/i4/1888948409/O1CN01J0BMy72BzNO4YE9yB_!!1888948409.png"
            mode="scaleToFill"
            class="service-item-icon"
          />
          <view class="service-item-name">玩法介绍</view>
        </view>
        <view class="service-item" @click="goNoticeList">
          <image
            src="https://img.alicdn.com/imgextra/i4/1888948409/O1CN01G6dWyX2BzNO375FFk_!!1888948409.png"
            mode="scaleToFill"
            class="service-item-icon"
          />
          <view class="service-item-name">平台公告</view>
        </view>
        <view class="service-item" @click="handleGroup">
          <image
            src="https://img.alicdn.com/imgextra/i4/1888948409/O1CN01SNx4162BzNO0AKI3k_!!1888948409.png"
            mode="scaleToFill"
            class="service-item-icon"
          />
          <view class="service-item-name">加入群聊</view>
        </view>
        <view class="service-item" @click="handleCustomer">
          <image
            src="https://img.alicdn.com/imgextra/i3/1888948409/O1CN01GhGrdN2BzNO5wN6io_!!1888948409.png"
            mode="scaleToFill"
            class="service-item-icon"
          />
          <view class="service-item-name">联系客服</view>
        </view>
        <view class="service-item">
            <!-- #ifdef H5 -->
            <image
              src="https://img.alicdn.com/imgextra/i3/1888948409/O1CN012sNBBB2BzNO0AIHIc_!!1888948409.png"
              mode="scaleToFill"
              class="service-item-icon"
              @click="handleCreatePoster"
            />
            <view class="service-item-name" @click="handleCreatePoster">邀请好友</view>
            <!-- #endif -->
            <!-- #ifdef MP-WEIXIN -->
            <button class="cell-button" open-type="share">
              <image
                src="https://img.alicdn.com/imgextra/i3/1888948409/O1CN012sNBBB2BzNO0AIHIc_!!1888948409.png"
                mode="scaleToFill"
                class="service-item-icon"
              />
              <view class="service-item-name">邀请好友</view>
            </button>
            <!-- #endif -->
          </view>
      </view>
    </view>
    <!-- 联系我们的 -->
    <ContactPopup
      :popup-show="contactPopup.show"
      :info="contactPopup.info"
      @close="closeContactPopup">
    </ContactPopup>
    <!-- 海报 -->
    <Poster
      ref="poster"
      :popupShow="Poster.show"
      @open="openPop"
      @close="closePosterPopup">
    </Poster>
    <!-- 公告 -->
    <u-popup u-popup v-model="showAnnouncement" mode="center" height="1064rpx">
			<view class="popup-content">
        <view class="announcement-title">系统通知</view>
        <scroll-view :scroll-y="true" class="announcement-content">
          <u-parse v-if="platformInfo" :html="platformInfo.announcement"></u-parse>
        </scroll-view>
			</view>
		</u-popup>
  </view>
</template>

<script>
  import { platformInfoByBusinessId } from '@/api/applet';
  import ContactPopup from '@/components/contact/contact.vue';
  import Poster from '@/components/poster/poster.vue';
  export default {
    components: {
      ContactPopup,
      Poster
    },
    data() {
      return {
        showAnnouncement: false,
        platformInfo: null,
        contactPopup:{
          show: false,
          info: {
            title: '',
            qrcode: '',
            wechatNumber: ''
          }
        },
        Poster: {
          show: false,
          posterList: []
        },
      }
    },
    mounted() {
      this.getPlatformInfoByBusinessId();
    },
    methods: {
      // 获取平台详情
      getPlatformInfoByBusinessId() {
        platformInfoByBusinessId().then(result => {
          if (result && result.code === 200) {
            this.platformInfo = result.data;
            this.$emit('plateInfo', result.data);
            if (result && result.data && result.data.open_announcement === '1' && result.data.announcement) {
              this.showAnnouncement = true;
            }
          }
        })
      },

      // 公告列表
      goNoticeList() {
        uni.navigateTo({
          url: '/pages/customer/noticeList'
        })
      },

      // 前往用户协议
      goAgreement() {
        uni.navigateTo({
          url: '/pages/about/agreement?showType=1'
        })
      },

      // 前往玩法
      goPlay() {
        uni.navigateTo({
          url: '/pages/play/index'
        })
      },

      // 联系客服
      handleCustomer() {
        this.contactPopup.info.title = '截图扫码或复制微信联系客服';
        this.contactPopup.info.wechatNumber = this.platformInfo.platform_customer_wechat;
        this.contactPopup.info.qrcode = this.platformInfo.platform_customer_wechat_qrcode;
        this.contactPopup.show = true;
      },

      // 关闭弹窗
      closeContactPopup() {
        this.contactPopup.show = false;
      },

      // 加入群聊
      handleGroup() {
        this.contactPopup.info.title = '截图扫码或长按扫码加入群聊';
        this.contactPopup.info.wechatNumber = '';
        this.contactPopup.info.qrcode = this.platformInfo.group_wechat_qrcode;
        this.contactPopup.show = true;
      },

      // 生成海报
      handleCreatePoster() {
        // this.Poster.show = true;
        this.$refs.poster.getPostList();
        uni.showLoading({
          title: '加载中...',
        })
        // setTimeout(()=>{
        //   this.Poster.show = true;
        // },3000)
      },
      openPop(){
        this.Poster.show = true;
        uni.hideLoading();
      },
      // 生成海报成功
      closePosterPopup() {
        this.Poster.show = false;
      },
    }
  }
</script>

<style lang="scss" scoped>
  .service-container{
    width: 100%;
    overflow: hidden;

    .service-content{
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .service-item{
        max-width: 20%;
        min-width: 20%;
        text-align: center;

        &-icon{
          width: 60rpx;
          height: 60rpx;
        }

        &-name{
          font-size: 24rpx;
          color: #333;
        }
      }

      .margin-bottom24{
        margin-bottom: 24rpx;
      }
    }

    .service-content-title{
      padding: 24rpx 0 12rpx 32rpx;
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
    }

    .service-content2{
      box-shadow: none;
      border-radius: 0;
    }
  }
  .cell-button{
		background: none;
		padding: 0;
		box-shadow: none;
    line-height: 24rpx;
    position: relative;
    height: 100rpx;

    .service-item-icon{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: auto;
    }

    .service-item-name{
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 32rpx;
      line-height: 32rpx;
      margin: auto;
    }
	}
	.cell-button::after{
		display: none;
	}

  .popup-content{
    position: relative;
    z-index: 1;
    max-height: 1060rpx;
  }

  // .popup-content{
  //   padding: 24rpx;
  //   max-height: 1020rpx;
  //   overflow: auto;
  //   position: relative;
  //   z-index: 0;
  // }

  .nav-container ::v-deep .u-model{
    background-color: transparent;
  }

  // .nav-container ::v-deep .u-drawer-center {
  //   position: fixed;
  //   top: 0;
  //   bottom: 0;
  //   left: 0;
  //   right: 0;
  // }

  .popup-content{
    width: 580rpx;
    height: 1064rpx;
    background-image: url(https://img.alicdn.com/imgextra/i2/1888948409/O1CN01ISNjVB2BzNSfrzcVj_!!1888948409.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    padding: 120rpx 32rpx 32rpx 32rpx;
    position: relative;

    .announcement-title{
      text-align: center;
      font-weight: 36rpx;
      font-weight: bold;
    }

    .announcement-content{
      margin-top: 32rpx;
      height: 800rpx;
      overflow: auto;
    }
  }

  .announcement-btn{
    width: 500rpx;
    height: 74rpx;
    text-align: center;
    line-height: 74rpx;
    color: $uni-color-primary;
    background: #fff;
    border-radius: 37rpx;
    margin: auto;
    margin-top: 32rpx;
  }
</style>
